<template>
	<view>
    <uni-list class="device-outline">
      <uni-list-item
          :title="device.F_ModelName">
        <view class="number-content">
          <view class="number-title">编号</view>
          <view class="number-detail">{{device.F_MachineCode}}</view>
        </view>
      </uni-list-item>
    </uni-list>
    <top-tabbar ref="topTabbar" :tabBars="tabBars" @clickItem="clickItem"></top-tabbar>
    <divider v-if="tabIndex !== 2"></divider>
    <view class="device-detail" v-if="tabIndex === 0">
      <section-title line-color="#DC2115" title="基本信息"></section-title>
      <uni-list class="device-map">
        <uni-list-item title="设备型号" :rightText="device.F_ModelName"/>
        <uni-list-item title="设备编号" :rightText="device.F_MachineCode"/>
        <uni-list-item title="公司" :rightText="device.F_CompanyName"/>
        <uni-list-item title="生产商" :rightText="device.F_ManufactureCode"/>
        <uni-list-item title="电话号码" :rightText="device.F_PhoneNum"/>
        <uni-list-item title="购买日期" :rightText="device.F_PurchaseDate"/>
        <uni-list-item title="备注" :rightText="device.F_Description"/>
      </uni-list>
    </view>
    <view class="device-code" v-if="tabIndex === 1">
      <section-title line-color="#DC2115" title="精简信息"></section-title>
      <uni-list class="device-map">
        <uni-list-item title="设备型号" :rightText="device.F_ModelName"/>
        <uni-list-item title="设备编号" :rightText="device.F_MachineCode"/>
        <uni-list-item title="公司" :rightText="device.F_CompanyName"/>
        <uni-list-item title="生产商" :rightText="device.F_ManufactureCode"/>
      </uni-list>
      <divider></divider>
      <section-title line-color="#DC2115" title="扫码"></section-title>
      <uni-list class="device-map">
        <uni-list-item title="二维码" rightImage="/static/image/common/code/qrcode.png" @click="toQrCode"/>
        <uni-list-item title="条形码" rightImage="/static/image/common/code/barcode.png" @click="toBarCode"/>
      </uni-list>
    </view>
    <message ref="message"></message>
	</view>
</template>

<script>
  import uniList from '@/components/uni/uni-list.vue'
  import uniListItem from '@/components/uni/uni-list-item.vue'
  import topTabbar from "../../components/topTabbar";
  import divider from "../../components/divider";
  import sectionTitle from "../../components/section-title"

  import store from "@/store/index.js"

	export default {
		data() {
			return {
				windowHeight: Number,
				windowWidth: Number,
				device: {},
        tabBars: [{name: '基本信息'}, {name: '扫码'}],
        tabIndex: 0
			}
		},
		methods: {
      /**
       * 点击顶部选项卡调用的方法
       * @param index 选项卡的索引值
       */
      clickItem(index) {
        this.tabIndex = index;
      },
      /**
       * 跳转至二维码界面
       */
      toQrCode() {
        let manufacture = this.device.F_ModelName;
        let enCode = this.device.F_MachineCode;
        uni.navigateTo({
          url: `/pages/device/code?codeType=1&manufacture=${manufacture}&enCode=${enCode}`
        })
      },
      /**
       * 跳转至条形码界面
       */
      toBarCode() {
        let manufacture = this.device.F_ModelName;
        let enCode = this.device.F_MachineCode;
        uni.navigateTo({
          url: `/pages/device/code?codeType=2&manufacture=${manufacture}&enCode=${enCode}`
        })
      }
		},
    onLoad(options) {
		  this.$nextTick(() => {
        this.$refs.topTabbar.changeTab(0);
      })
      this.device = JSON.parse(decodeURIComponent(options.device))
    },
		onReady() {
      this.$refs.message.setMessageToStore(this.$refs.message)
		},
    components: {
      divider, uniList, uniListItem, topTabbar, sectionTitle
    },
    /**
     * 点击右上角首页按钮，跳转到首页
     */
    onNavigationBarButtonTap() {
      store.commit('returnToHome')
    }
	}
</script>

<style scoped lang="scss">
  @import "~@/static/css/device/detail.scss";
</style>

<style>
	/* #ifndef APP-NVUE */
	page {
		background: #f5f5f5;
	}
	/* #endif */
</style>
